import * as echarts from 'echarts'

export const renderChart = (domId: string, { type = 'pie', title = '用户分布', series = [] }) => {
  let chartOptions = {} as any

  if (type === 'pie') {
    chartOptions = pieChartOptions
    chartOptions.title.text = title
    chartOptions.series = series
  }

  if (type === 'line') {
    chartOptions = lineChartOptions
    chartOptions.title.text = title
    chartOptions.series = series
  }

  const chartDom = document.getElementById(domId)
  const myChart = echarts.init(chartDom)
  myChart.setOption(chartOptions)
}

const pieChartOptions = {
  title: {
    text: '',
    left: 'center',
    top: '5%',
    textStyle: {
      fontSize: 14,
      color: '#f8f8f8',
    },
  },
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b}: {c} ({d}%)',
    backgroundColor: 'rgba(0,0,0,0.7)',
    borderColor: 'rgba(255,255,255,0.3)',
    textStyle: {
      // color: '#fff',
      fontSize: 12,
    },
  },
  legend: {
    orient: 'horizontal',
    bottom: '10%',
    itemGap: 3, // 减小图例间距
    itemWidth: 10, // 减小图例标记的宽度
    itemHeight: 10, // 减小图例标记的高度
    textStyle: {
      fontSize: 10, // 减小图例文字大小
      color: '#f0f0f0',
    },
  },
  series: [
    {
      name: '性别比例',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 1048, name: '男' },
        { value: 735, name: '女' },
      ],
      label: {
        show: false, // 关闭指示线
      },
      labelLine: {
        show: false, // 关闭指示线
      },
    },
  ],
}

const lineChartOptions = {}
